<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b04dfc206dec442fe161b33082681ec.png?w=632&h=340" alt="Image 1">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e981f78d2ac17c504975a719cb8b069d.png?w=632&h=340" alt="Image 2">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b0c7fadbd84a808287af5faad6e62d7.png?w=632&h=340" alt="Image 3">
        <
    -->
    <style>
        .loop{height: 400px;width: 600px;border: 2px solid red;}
        .loop img{width: 100%;height: 100%;}
    </style>
    <div class="loop">
        <img id="loopImg" src="" alt="">
    </div>
    <button id="preBtn">上一张</button>
    <button id="nextBtn">下一张</button>
    <script>
        // 图片索引
        var index = 0;
        var imgArr = [
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b04dfc206dec442fe161b33082681ec.png',
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e981f78d2ac17c504975a719cb8b069d.png',
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b0c7fadbd84a808287af5faad6e62d7.png'
        ];

        // 初始化轮播图
        loopImg.src=imgArr[index];

        nextBtn.onclick=function(){
            index++;
            if(index==imgArr.length){
                index = 0;
            }
            loopImg.src=imgArr[index];
        }
        preBtn.onclick=function(){
            index--;
            if(index==-1){
                index = imgArr.length-1;
            }
            loopImg.src=imgArr[index];
        }
    </script>
</body>
</html>